<template>
    <div class="main">
        <div v-for="(item,index) in recommendlist" :key="index" class="hotcover">
            <van-image :src="item.picUrl" radius="0.5rem" width="10rem" />
            <div class="hottitle">
                <div class="hotnickname">
                    <span>{{ item.name }}</span>
                </div>
                <div class="hotrcmd">
                    <span>{{ item.rcmdtext }}</span>
                </div>
            </div>
            <div class="subcount">
                <span>{{ item.subCount | numFilter(1) }}万</span>
            </div>
        </div>
    </div>
</template>
<script>

export default { 
    data(){
        return {
            recommendlist : [],
        };
    },
    created(){
        this.getListenData();
    },
    methods: {
        getListenData(){
            this.$request("get","/dj/radio/hot?cateId=14").then((res) => {
                this.recommendlist = res.djRadios;
            });
        }
    },
    filters:{
        numFilter(value,num){
            return parseFloat(value / 10000).toFixed(num);
        },
    }
};
</script>
<style scoped>
.hotcover{
    text-align: left;
    display: inline-block;
    margin: 0.7rem;
    vertical-align: top;
    position:relative;
    color: white;
    
}
.hottitle{
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    text-shadow: 0.5px 0.5px 0px #000,
                 -0.5px -0.5px 0 #000,
                 -0.5px 0.5px 0 #000,
                 0.5px -0.5px 0 #000;
}
.hotrcmd{
    width:5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
}
.hotnickname{
    width:4rem;
    font-size: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
}
.subcount{
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    text-shadow: 0.5px 0.5px 0px #000,
                 -0.5px -0.5px 0 #000,
                 -0.5px 0.5px 0 #000,
                 0.5px -0.5px 0 #000;
}
</style>